<template>
  <div class="about-warp">
    <el-row type="flex" justify="center">
      <el-col :span="14">
          <div>
            <!--直接展示项目的ReadMe-->
                  <mavonEditor
                    class="md"
                    :value="aboutContent"
                    :subfield = "prop.subfield"
                    :defaultOpen = "prop.defaultOpen"
                    :toolbarsFlag = "prop.toolbarsFlag"
                    :editable="prop.editable"
                    :scrollStyle="prop.scrollStyle"
                    :codeStyle="prop.codeStyle"
                ></mavonEditor>
          </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor';
export default {
  name:"about",
  computed: {
      //编辑器的设置
        prop () {
          let data = {
            subfield: false,// 单双栏模式
            defaultOpen: 'preview',//edit： 默认展示编辑区域 ， preview： 默认展示预览区域 
            editable: false,
            toolbarsFlag: false,
            scrollStyle: true,
            codeStyle:"atelier-lakeside-dark"
          }
          return data
        }
      },
  components:{
    mavonEditor
  },
  data(){
    return {
      aboutContent:`# Vue初学，做个小博客

## mikutap小游戏：[点击前往](http://hatsune_miku_yyy.gitee.io/mikutap)

![预览](https://hatsune-miku-yyy-blog-static.oss-cn-chengdu.aliyuncs.com/static/mikutap.gif)


## Project setup
\`\`\`
npm install
\`\`\`

### Compiles and hot-reloads for development
\`\`\`
npm run serve
\`\`\`

### Compiles and minifies for production
\`\`\`
npm run build
\`\`\`

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
### 使用的Live2D项目来源：[gitHub地址](https://github.com/qq583044063qq/live2dDemo)
### 前端框架为：[element ui](https://element.eleme.cn/#/zh-CN/component/installation)
### 我的B站空间：[Hatsune_Miku_YYY](https://space.bilibili.com/3931848)
### 码云空间：[MikuMiku](https://gitee.com/Hatsune_Miku_YYY)
### github空间：[MikuMiku](https://github.com/qq583044063qq)
### mikutap小游戏项目地址：[mikutap](https://gitee.com/rcraft/mikutap)`
    }
  }
}
</script>

<style>
.about-warp {
  min-height: 750px;
  margin: 20px 0;
  padding: 5px;
}
</style>
